<template>
	<view :data-theme="theme" class="container">
		<view class="card" v-for="(item,index) in activeData" :key="index">
			<view style="flex-flow: row;display: flex;">
				<view style="flex: 1;">
					<u--image :radius="5" :showLoading="true" :src="item.image" width="70px"
						height="70px"></u--image>
				</view>
				<view style="flex: 4;">
					<view style="display: flex;flex-flow: column;flex: 1;margin: 0 6px 0 6px;">
						<view style="display: flex;align-items: center;position: relative;">
							<text class="u-line-1"
								style="font-size: 31rpx;font-weight: bold;margin: 20rpx 0;">{{item.name}}</text>
						</view>
						<view style="display: flex;margin: 0 0 10rpx 0;">
							<text class="u-line-1" style="margin: 8rpx 0;">{{item.skuName}}</text>
						</view>
						<view
							style="font-size: 25rpx; display: flex;justify-content: space-between;background-color: #edfaf4;padding: 14rpx 20rpx;">
							<text style="color: #08bc76;">确认调价</text>
							<text style="font-size: 24rpx;color: #565756;">操作于2023.05.15 19:26:09</text>
						</view>
						<view style="margin: 30rpx 0 10rpx 0;">
							<view class="title-top">
								价格信息
							</view>
							<view class="name-param">
								<text class="param_name_text">当前活动价</text>
								<text class="param_name_value">26.41 <span
										style="font-size: 24rpx;margin-left: 10rpx;color: #999;text-decoration: line-through;">23.66</span></text>
							</view>
							<view class="name-param">
								<text class="param_name_text">系统建议价</text>
								<text class="param_name_value" style="color: red;">25.65</text>
							</view>
						</view>

						<view>
							<view class="title-top">
								活动信息
							</view>
							<view class="name-param">
								<text class="param_name_text">活动名称</text>
								<view class="param_name_value">0509-0523享价享价-中北</view>
							</view>
							<view class="name-param">
								<text class="param_name_text">售卖区域</text>
								<text class="param_name_value">北京</text>
							</view>
							<view class="name-param">
								<text class="param_name_text">客户范围</text>
								<text class="param_name_value">平台新客</text>
							</view>

							<view v-if="timeTypeShow">
								<view class="name-param">
									<text class="param_name_text">活动类型</text>
									<text class="param_name_value">新客爆品</text>
								</view>
								<view class="name-param">
									<text class="param_name_text">活动时间</text>
									<text class="param_name_value" style="color: #999;">2023.05.09 - 2023.05.23</text>
								</view>
								<view class="name-param">
									<text class="param_name_text">促销库存</text>
									<text class="param_name_value">不限(单客户日限购3箱)</text>
								</view>
							</view>
							<view class="name-param" @click="showMoreText()">
								<text
									style="font-size: 15px;color: #999;margin-right: 30rpx;">{{timeTypeShow?'收起部分':'展开更多'}}</text>
								<u-icon :name="timeTypeShow?'arrow-up':'arrow-down'" size="10"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from '@/utils/setTheme.js'
	let app = getApp();
	export default {
		props: {
			// tab: {
			// 	type: [Object],
			// 	default: ''
			// },
			// parentId: {
			// 	type: String,
			// 	default: ''
			// },
			bgColor: {
				type: String,
				default: 'blue'
			},
		},
		data() {
			return {
				theme: app.globalData.theme,
				loadMoreStatus: 'noMore', //加载更多
				activeData: [{
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					skuName: '7.4公斤/箱(2包)',
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					operatyCity: '北京',
				},{
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					skuName: '7.4公斤/箱(2包)',
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					operatyCity: '北京',
				},{
					image: 'http://192.168.1.29:8080/img_xyt/public/product/2024/04/23/3669c2389d38458582e36ee84d6fe235o80gc46lgn.png',
					name: "冻品尝鲜价04.17-04.30",
					skuName: '7.4公斤/箱(2包)',
					datailContent: "提报价格需低于招商指导价，相同商品取提报活动价低品优先展示，给出价格力度越高，提报成功率越高。",
					endTime: "2024.4.30 23:59:59",
					activeTime: "2024.4.17-2024.4.30",
					queryStatus: 1, //1直接生效
					operatyCity: '北京',
				}],
				timeTypeShow: false,
			}
		},
		methods: {
			showMoreText() {
				this.timeTypeShow = !this.timeTypeShow;
			},
			initData() {
				// 首次激活时被调用
				this.productParam.current = 1;
				this.loadMoreStatus = 'more';
				//需要初始化商品列表数据，根据数据类型
				this.productParam.type = this.tab.type;
			
				// this.getProductList();
				this.loadMoreStatus = 'noMore';
			},
			// 触底事件 onReachBottom 加载更多数据
			scrolltolowerFn() {
				if (this.loadMoreStatus != 'more') {
					return;
				}
				this.productParam.current++;
				this.getProductList(true);
			},
			toDetails(item) {
				this.$emit('toDetails', item);
			},
			showInfoModal(index, product) {
				this.$emit('showInfoModal', {
					index: index,
					product: product
				});
			},
			clear() {
				// 释放数据时被调用，参考 swiper-list 缓存配置
				this.dataList.length = 0;
			},
			onrefresh(e) {
				this.refreshing = true;
				this.refreshText = "刷新中...";
				setTimeout(() => {
					this.refreshing = false;
					this.refreshFlag = false;
					this.refreshText = "已刷新";
				}, 2000)
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}
			
				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $coupons-light-color5;
	}

	.card {
		margin: 14rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
	.title-top{
		 font-weight: bold;
		 font-size: 29rpx;
	}

	.name-param {
		margin: 18rpx 0;
		display: flex;
		flex-flow: row;

		.param_name_text {
			width: 150rpx;
			font-size: 30rpx;
			color: #999;
			margin-right: 30rpx;
		}

		.param_name_value {
			flex: 1;
		}
	}


	.header-top {
		display: flex;
		justify-content: space-between;

		.header_name {
			font-size: 31rpx;
			font-weight: bolder;
		}
	}

	.top_content_sign {
		color: #8d8d8d;
		font-size: 28rpx;
		position: absolute;
		right: -30rpx;
		top: -32rpx;
		padding: 6rpx;
		border-radius: 0 10rpx 0 16rpx;
		background-color: #f0f0f0;
	}

	.border-item {
		border-bottom: 1px solid #f3f3f3;
	}

	.swiper-item {
		flex: 1;
		flex-direction: column;
	}

	.swiper-page {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		flex: 1;
		height: 820rpx;

		.scroll-view {
			height: 100%;
		}
	}
</style>